<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<%@ page isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<title>个人主页</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<link href="skin1/css/public.css" type="text/css" rel="stylesheet"/>
<link href="skin1/css/gongneng.css" type="text/css" rel="stylesheet"/>
<link href="skin1/css/header.css" type="text/css" rel="stylesheet"/>
<script src="dwr/interface/UserAction.js"></script>
<script src="dwr/interface/LeaveMessageAction.js"></script>
<script src="dwr/engine.js"></script> 
<script src="dwr/util.js"></script>
<script>
			function friendRequest(userNo) {
				UserAction.friendRequest(userNo, callback);
			}
		
			function fansRequest(userNo) {
				UserAction.fansRequest(userNo, callback);
			}
			
			function callback(data) {
				alert(data);
			}
</script>
<style>
#ph6 .ul .check{
	cursor: pointer;
}
#ph6 .ul {
	margin-top:0px;
	padding-top:0px;
}
#ph6 .ul li{
	display:none;
	border-bottom:1px solid red;
	width:200px;
	padding-top:2px;
}
</style>
</head>
<body>
<div class=pageContent>
<jsp:include flush="true" page="../include/header.jsp"></jsp:include>

<div class=main>
<div class=mainLeft3>
<div class="tp7 tp7n">
  <h3>个人主页</h3>
  <div id="ph1">
  	<div id="ph2"><img src="upload/headphoto/${requestScope.user.photoURL}" alt="img" width="150" class="ph2_1" /><h4>给我打分：4</h4><div id="ph3"><img src="skin1/images/star.gif" alt="1" /><img src="skin1/images/star.gif" alt="1" /><img src="skin1/images/star.gif" alt="1" /><img src="skin1/images/star.gif" alt="1" /><img src="skin1/images/star.gif" alt="1" /><img src="skin1/images/star.gif" alt="1" /><img src="skin1/images/star.gif" alt="1" /><img src="skin1/images/star.gif" alt="1" /><img src="skin1/images/star.gif" alt="1" /><img src="skin1/images/star.gif" alt="1" /></div>
  	  <input type="submit" name="button" id="button" value="一朵玫瑰" />
  	  <input type="submit" name="button2" id="button2" value="加为好友" onclick="javascript:friendRequest(${param.userNo})"/>
  	  <input type="submit" name="button3" id="button3" value="成为粉丝" onclick="javascript:fansRequest(${param.userNo})" />
  	  <input type="submit" name="button4" id="button4" value="发送短消息" />
  	</div>
    <div id="phr">
      <ul>
        <li><span>昵 &nbsp;称：</span><c:out value="${requestScope.user.username}"></c:out></li>
        <li><span>贡 &nbsp;献：</span><strong>${requestScope.user.userData.contribute }</strong> 贴</li>
        <li><span>爱 &nbsp;情：</span>${requestScope.user.marriage==0?"寻爱中" : (requestScope.user.marriage==1?"单身中" : (requestScope.user.marriage==2?"恋爱中" : "已婚" )) }</li>
        <li><span>心 &nbsp;情：</span>98</li>
        <li><span>生 &nbsp;日：</span><fmt:formatDate value="${requestScope.user.birthday}" pattern="yy年MM月dd日"/></li>
        <li><span>加 &nbsp;入：</span><fmt:formatDate value="${requestScope.user.registerDate }" pattern="yyyy年MM月dd日"/></li>
        <li><span>等 &nbsp;级：</span><strong>${requestScope.user.userData.grade }</strong> 级</li>
        <li><span>所在地：</span>${requestScope.user.provinceCode}-${requestScope.user.cityCode}-${requestScope.user.regionCode}</li>
        <li><span>积 &nbsp;分：</span><strong>${requestScope.user.userData.score }</strong> 分</li>
        <li><span>人 &nbsp;气：</span><strong>${requestScope.user.userData.popularity }</strong></li>
        <li><span>号 &nbsp;码：</span>${requestScope.user.userNo }</li>
      </ul>
      <div><span>个人简介：</span><br />
        ${requestScope.user.signment }<br />
        <br />
        <span>照&nbsp;&nbsp;片：</span><br />
        <img src="skin1/images/user01.jpg" alt="img" width="60" height="60" /><img src="skin1/images/user01.jpg" alt="img" width="60" height="60" /><img src="skin1/images/user01.jpg" alt="img" width="60" height="60" /><img src="skin1/images/user01.jpg" alt="img" width="60" height="60" /><img src="skin1/images/user01.jpg" alt="img" width="60" height="60" /></div>
      </div>
  </div>
</div>
<div class="tp7">
  <h3>自我介绍</h3>
  <div class="ph">${requestScope.user.introduction }</div>
</div>
<div class="tp7">
  <h3>我的音乐</h3>
  <div class="ph">这里填写 自我介绍</div>
</div>
<div class="tp7">
  <h3>我的偶像</h3>
  <div class="ph">这里填写 自我介绍</div>
</div>
</div>
<div class=mainRight3>
<div class="tp7 tp7n">
  <h3>我的礼物</h3>
  <div class="ph"><a href="#">送礼物</a></div>
</div>
<div class="tp7">
  <h3>好友</h3>
  <div class="ph4">
    <div><a href="#"><img src="skin1/images/user01.jpg" alt="img" width="60" height="60" /></a><a href="#">送礼物</a></div>
    <div><a href="#"><img src="skin1/images/user01.jpg" alt="img" width="60" height="60" /></a><a href="#">送礼物</a></div>
    <div><a href="#"><img src="skin1/images/user01.jpg" alt="img" width="60" height="60" /></a><a href="#">送礼物</a></div>
    <div><a href="#"><img src="skin1/images/user01.jpg" alt="img" width="60" height="60" /></a><a href="#">送礼物</a></div>
  </div>
</div>
<div class="tp7">
  <h3>粉丝</h3>
  <div>
    <div class="ph4">
      <div><a href="#"><img src="skin1/images/user01.jpg" alt="img" width="60" height="60" /></a><a href="#">送礼物</a></div>
      <div><a href="#"><img src="skin1/images/user01.jpg" alt="img" width="60" height="60" /></a><a href="#">送礼物</a></div>
      <div><a href="#"><img src="skin1/images/user01.jpg" alt="img" width="60" height="60" /></a><a href="#">送礼物</a></div>
      <div><a href="#"><img src="skin1/images/user01.jpg" alt="img" width="60" height="60" /></a><a href="#">送礼物</a></div>
    </div>
  </div>
</div>
<div class="tp7">
  <h3>偶像</h3>
  <div>
    <div class="ph4">
      <div><a href="#"><img src="skin1/images/user01.jpg" alt="img" width="60" height="60" /></a><a href="#">送礼物</a></div>
      <div><a href="#"><img src="skin1/images/user01.jpg" alt="img" width="60" height="60" /></a><a href="#">送礼物</a></div>
      <div><a href="#"><img src="skin1/images/user01.jpg" alt="img" width="60" height="60" /></a><a href="#">送礼物</a></div>
      <div><a href="#"><img src="skin1/images/user01.jpg" alt="img" width="60" height="60" /></a><a href="#">送礼物</a></div>
    </div>
  </div>
</div>
<div class="tp7">
  <h3>日记</h3>
	
  <div id="ph5">
  	<c:forEach items="${requestScope.diaryList}" var="data">
  	<h4><span><fmt:formatDate value="${data.date}" pattern="yyyy-MM-dd HH:mm"/></span><a href="diary.do?method=showDiary&id=${data.id}">${data.title }</a></h4>
  	<div>&nbsp;&nbsp;&nbsp;&nbsp;人们只看到英雄是英雄的时候，却没有看到英雄灌水的时候，却没有看到英雄灌水的时候</div>
	</c:forEach>
  	
  	
    <h4><span>08-1-41</span>日记1</h4>
  	<div>&nbsp;&nbsp;&nbsp;&nbsp;人们只看到英雄是英雄的时候，却没有看到英雄灌水的时候，却没有看到英雄灌水的时候</div>
    <h4><span>08-1-41</span>日记1</h4>
  	<div>&nbsp;&nbsp;&nbsp;&nbsp;人们只看到英雄是英雄的时候，却没有看到英雄灌水的时候，却没有看到英雄灌水的时候</div>
  </div>
</div>
<div class="tp7">
  <h3>我的留言</h3>
  <div id="ph6">
  	<div><dl>人们只看到英雄是英雄的时候<ul><li>ddd</li><li>ddd</li><li>ddd</li></ul></dl><span><a href="#">送礼物</a><a href="#"><img src="skin1/images/user01.jpg" alt="img" width="60"/></a>2008-12-12</span></div>
    <div><dl>人们只看到英雄是英雄的时候</dl><span><a href="#">送礼物</a><a href="#"><img src="skin1/images/user01.jpg" alt="img" width="60" height="60" /></a></span></div>
    <div><dl>人们只看到英雄是英雄的时候</dl><span><a href="#">送礼物</a><a href="#"><img src="skin1/images/user01.jpg" alt="img" width="60" height="60" /></a></span></div>
  </div>
  
  <div id="ph7">
  	<div id="next"></div>
  	<strong>给我留言：(VIP可以使用[img][/img]标签添加网络图片留言)</strong>
  	<input id="receiveUserNo" type="hidden" name="receiveUserNo" value="${param.userNo}"/>
    <input id="content" name="textfield" type="text" class="ph7_1" id="textfield" />
    <input type="button" class="fmbule" value="发  送" onclick="add()"/>
  </div>
</div>
</div>
</div>
<div class="clear"></div>
<jsp:include flush="true" page="../include/footer.jsp"></jsp:include>
</div>


<script>
	function add(){
		var content = DWRUtil.getValue("content");
		var receiveUserNo = DWRUtil.getValue("receiveUserNo");
		var message = {content:content, receiveUserNo:receiveUserNo};
		LeaveMessageAction.leaveMessage(message, function(data){
		
			var str = createComment(data);
			
			var item = document.createElement("div");
			item.innerHTML = str;
			var at3 = document.getElementById("ph6");
			at3.appendChild(item);
			document.getElementById("content").value = "";
		});
	}
	
			function showAll(item){
				var next = item;
				next.style.display = "none";
				while(next.nextSibling) {
					next = next.nextSibling;
					next.style.display = "block";
				}
			}
			function show(id){
				var item = document.getElementById("ul" + id);
				if(item.lastChild){
					if(item.childNodes.length > 2){
						//var firstItem = item.firstChild;
						//alert(firstItem.style.dispaly)
						//firstItem.style.dispaly = "block";
						//alert(firstItem.style.dispaly)
						var firstItem = item.firstChild;
						firstItem.style.display = "block";
					}
					if(item.childNodes.length > 1){
						var lastItem = item.lastChild;
						
						lastItem.style.display = "block";
						
					}
				}
			}
			
			
	function getMessages(userNo, cur){
		LeaveMessageAction.getLeaveMessage(userNo, cur, function(data){
			var string = "";
		
			var count = data[1];
			var commentList = data[0];
			if(count > 0) {
				for(var i = 0;i < commentList.length; i++) {
					var comment = commentList[i];
					string += createComment(comment);
				}
				document.getElementById("ph6").innerHTML = string;
				createNext(cur, count,userNo);
			} else {
				document.getElementById("ph6").innerHTML = "<div class=\"lyLine\"><div class=\"lyine01\">暂无留言</div>";
			}
				
		});
	}
	
	function createComment(data){
		
		var str = "<div><dl><pre>" + data.content + "</pre><ul id=\"ul"+data.id+"\" class=\"ul\" style=\"list-style: none;margin-left:15px;\">" +
					"<li class=\"check\" onclick=\"showAll(this)\">查看完整对话</li>";
	
		//var str = "<div class=\"lyLine\"><div class=\"lyine01\"><a href=\"personal.do?userNo=" + data.leaveUserNo + "\">" + data.leaveUserName + "</a></div>" +
		//			"<div class=\"lyine01\">" + data.time.toLocaleString() + "</div>" +
		//			"<div class=\"lyLine02\"><div class=\"lyLine03PicDiv\"><img src=\"upload/headphoto/" + data.leaveUserPhoto + "\" class=\"lyLine03Pic\"/>" +
		//			"</div><div class=\"lyLine04\"><pre>" + data.content + "</pre><ul id=\"ul"+data.id+"\" class=\"ul\" style=\"list-style: none;margin-left:15px;\">" +
		//			"<li class=\"check\" onclick=\"showAll(this)\">查看完整对话</li>";
		//alert(data);
		var reply = data.leaveMessageReply;
		
		for(var i = 0; i < reply.length; i++) {
			
			var replyComment = reply[i];
			str += "<li><a href=\"" + replyComment.replyUserNo + "\">" + replyComment.replyUserName + "</a><span style=\"margin-left:15px;\">" + replyComment.time.toLocaleString() + "</span>" +
					"<pre style=\"margin-top:2px;padding-left:15px;\">"+replyComment.content+"</pre></li>";
		}
		//alert(reply.length);
		//alert("1");
		str += "</ul><script defer=\"defer\">show("+ data.id + ")</" + "script>";
		
		str += "</dl><a href=\"personal.do?userNo=" + data.leaveUserNo + "\">" + data.leaveUserName + 
					"</a><a href=\"personal.do?userNo=" + data.leaveUserNo + "\"><img src=\"upload/headphoto/" + data.leaveUserPhoto + "\" alt=\"img\" width=\"60\"/></a>" + 
					data.time.toLocaleString() + "</span></div>";
		//str += "</ul><script defer=\"defer\">show("+ data.id + ")</" + "script></div></div></div><hr/>";
		
		return str;
	}
	
	function getNext(cur, userNo){
		getMessages(userNo, cur);
	}
	
	function createNext(cur, count, userNo){
		var number = 0;
		var limit = 5;
		if(count % limit == 0) {
			number = count / limit;
		} else {
		
			number = Math.floor(count / limit) + 1;
		}
		
		var alink = "";
		
		if(cur > 0) {
			alink += "<a href=\"javascript:getNext(0," + userNo +")\">首页</a>...<a href=\"javascript:getNext(" + (cur-1) + "," + userNo + ")\">上一页</a>...";
		}
		alink += (cur + 1) + "/" + number;
		if(cur < number -1) {
			alink += "...<a href=\"javascript:getNext(" + (cur+1) + "," + userNo + ")\">下一页</a>...<a href=\"javascript:getNext(" + (number-1) + "," + userNo + ")\">尾页</a>";
		}
		
		document.getElementById("next").innerHTML = alink;
		
	}
	
	getMessages(${param.userNo}, 0);
</script>
</body>
</html>
